<template>
    <div class="fillcontain">
        <div class="form">
            <el-form 
                ref="form" 
                :model="form"
                :rules="form_rules"
                label-width="180px"
                style=" padding: 20px;width:auto;background: #fff;"
            >

                <el-form-item prop='bonus_percent' label="分红收益百分比:">
                    <el-input   placeholder="请输入分红收益百分比" v-model.number="form.bonus_percent"></el-input>
                    <span class="span">%</span>
                </el-form-item>
				
				
				<el-form-item prop='normal_commission' label="普通用户返佣金额:">
				    <el-input  placeholder="请输入返佣金额" v-model.number="form.normal_commission"></el-input>
                    <span class="span">元</span>
                </el-form-item>

                <el-form-item prop='group_commission' label="团长返佣金额:">
				    <el-input  placeholder="请输入返佣金额" v-model.number="form.group_commission"></el-input>
                    <span class="span">元</span>
                </el-form-item>
                
              
                <el-form-item  class="text_right">
                    <el-button type="primary" @click='onSubmit("form")'>保 存</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    import * as mutils from '@/utils/mUtils'
    import { getConfig, updateConfig } from "@/api/finance";

    export default {
        data(){
            return {
                form: {
                    bonus_percent: '',
                    normal_commission: '',
                    group_commission: '',
                },
                form_rules: {
                     bonus_percent: [
                        {required: true, message : '分红收益百分比必填',trigger : 'blur'},
                        {type: 'number', message : '分红收益百分比',trigger : 'blur'},
                    ],
                    normal_commission: [
                        { required: true, message : '普通用户返佣金额必填',trigger: 'blur'},
                        {type: 'number', message : '普通用户返佣金额',trigger : 'blur'},
                    ],
                    group_commission: [
                        { required: true, message : '团长返佣金额必填',trigger: 'blur'},
                        {type: 'number', message : '团长返佣金额',trigger : 'blur'},
                    ],
                },
            }
        },
      
        computed:{
        },
      	mounted() {
            this.getMoneyList();
	   },
	   methods:{
          
            // 获取资金列表数据
            getMoneyList(){
                const para = {};
                getConfig(para).then(res => {
                     this.loading = false;
                     this.form = res.data || {};
                }).catch(error  => {
                    console.log(error);
                    this.loading = false;
                })
            },
            onSubmit() {
                updateConfig(this.form).then(res => {
                    this.$message({
                        message:  `修改成功`,
                        type: 'success'
                    })
                }).catch(error  => {
                    console.log(error);
                    this.loading = false;
                })
            },
            setSearchBtn(val){
                let isFlag = true;
                if(val.length > 0){
                    isFlag = false;
                }else{
                    isFlag = true;
                }
                this.$store.commit('SET_SEARCHBTN_DISABLED',isFlag);
            }
        },
    }
</script>

<style lang="less" scoped>
    .table_container{
        padding: 10px;
        background: #fff;
        border-radius: 2px;
    }
    .el-dialog--small{
       width: 600px !important;
    }
    .pagination{
        text-align: left;
        margin-top: 10px;
    }
    .form{
        .el-form-item{
            .el-input{
                width: calc(100% - 40px;)
            }
            .span{
                display: inline-block;
                text-align: center;
                width: 32px;
            }
        }
    }
</style>


